<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<!-- 引入icon页面图标 -->
	<link rel="shortcut icon" href="favicon.ico" />
	<!-- 引入字体图标 -->
	<link rel="stylesheet" href="./lib/font/iconfont.css">
	<!-- 引入页面 CSS文件 -->
	<link rel="stylesheet" href="./css/index.css">
	<!-- 引入页面 初始化样式 -->
	<link rel="stylesheet" href="./css/init.css">
	<!-- 引入页面 公共样式 -->
	<link rel="stylesheet" href="./css/public.css">
	<!-- 引入页面 响应式样式 -->
	<link rel="stylesheet" href="./css/Responsive.css">
	<!-- 引入轮播图 -->
	<link rel="stylesheet" href="./lib/swiper/swiper-bundle.min.css" />
	<title>Yuexing - 不断改善，成为最佳🎉</title>
</head>

<body>
	<!-- 导航栏 -->
	<div class="nav">
		<div class="w">
			<!-- 一级导航 -->
			<ul class="one">
				<!-- 菜单 -->
				<li class="item" id="menu">
					<a href="javascript:;" style="display: inline-block;">
						<i class="iconfont icon-caidan1"></i>
					</a>
				</li>

				<!-- logo -->
				<li class="item1">
					<a href="./index.html">
						<img src="./image/logo2.png" alt="" id="logo">
					</a>
				</li>

				<li class="item1">
					<a href="./index.html">
						<i class="iconfont icon-shouye"></i>首页
					</a>
				</li>

				<li class="item1">
					<a href="./category.html">
						<i class="iconfont icon-bijiben1"></i>开发记录
					</a>
				</li>

				<li class="item1">
					<a href="./index.html">
						<i class="iconfont icon-yuandaima"></i>大前端
					</a>

					<!-- 二级导航 -->
					<ul class="two" style="display: none;">
						<li>
							<a href="javascript:;">HTML5</a>
						</li>

						<li>
							<a href="javascript:;">CSS3</a>
						</li>

						<li>
							<a href="javascript:;">JavaScript</a>
						</li>
					</ul>
				</li>

				<li class="item1">
					<a href="./index.html">
						<i class="iconfont icon-zuzhijiagou1"></i>框架
					</a>

					<!-- 二级导航 -->
					<ul class="two" style="display: none;">
						<li>
							<a href="javascript:;">Vue</a>
						</li>

						<li>
							<a href="javascript:;">React</a>
						</li>

						<li>
							<a href="javascript:;">Angular</a>
						</li>
					</ul>
				</li>

				<li class="item1">
					<a href="javascript:;">
						<i class="iconfont icon-zhuti1"></i>扩展
					</a>

					<ul class="two" style="display: none;">
						<li>
							<a href="./links.html"><i class="iconfont icon-quanzi1"></i>人脉圈</a>
						</li>

						<li>
							<a href="./circle.html"><i class="iconfont icon-pengyouquan1"></i>朋友圈</a>
						</li>

						<li>
                            <a href="./bigData.html"><i class="iconfont icon-dashuju2"></i>大数据</a>
                        </li>
					</ul>
				</li>

				<!-- 功能栏 -->
				<li class="function">
					<ol>
						<!-- 白天昼夜切换 -->
						<li id="HighlightToggle">
							<img src="./image/taiyang.png" alt="">
						</li>

						<li>
							<a href="javascript:;">
								<i class="iconfont icon-sousuo1"></i>
							</a>
						</li>
					</ol>
				</li>
			</ul>
		</div>
	</div>

	<!-- 移动端的侧边导航栏 -->
	<div class="mNav">
		<!-- 头像 -->
		<div class="user">
			<img src="./image/user.png" alt="">
			<span>Yuexing</span>
			<p>不断改善成为最佳!</p>
		</div>

		<!-- 导航栏 -->
		<ul>
			<li class="item">
				<a href="./index.html">
					<i class="iconfont icon-shouye"></i>首页
				</a>
			</li>

			<li class="item">
				<a href="./category.html">
					<i class="iconfont icon-bijiben1"></i>开发记录
				</a>
			</li>

			<li class="item">
				<a href="javascript:;" id="twoNav">
					<i class="iconfont icon-yuandaima"></i>大前端
				</a>

				<!-- 二级导航 -->
				<ul class="two">
					<li>
						<a href="javascript:;">HTML5</a>
					</li>

					<li>
						<a href="javascript:;">CSS3</a>
					</li>

					<li>
						<a href="javascript:;">JavaScript</a>
					</li>
				</ul>
			</li>

			<li class="item">
				<a href="javascript:;" id="twoNav">
					<i class="iconfont icon-zuzhijiagou1"></i>框架
				</a>

				<!-- 二级导航 -->
				<ul class="two">
					<li>
						<a href="javascript:;">Vue</a>
					</li>

					<li>
						<a href="javascript:;">React</a>
					</li>

					<li>
						<a href="javascript:;">Angular</a>
					</li>
				</ul>
			</li>

			<li class="item">
				<a href="javascript:;" id="twoNav">
					<i class="iconfont icon-zhuti1"></i>扩展
				</a>

				<ul class="two">
					<li>
						<a href="./links.html">
							<i class="iconfont icon-quanzi1"></i>人脉圈
						</a>
					</li>

					<li>
						<a href="./circle.html">
							<i class="iconfont icon-pengyouquan1"></i>朋友圈
						</a>
					</li>

					<li>
						<a href="./bigData.html"><i class="iconfont icon-dashuju2"></i>大数据</a>
					</li>
				</ul>
			</li>
		</ul>
	</div>

	<!-- 遮罩层 -->
	<div class="mask"></div>

	<!-- 轮播图 -->
	<div class="banner">
		<div class="swiper mySwiper">
			<div class="swiper-wrapper">
				<div class="swiper-slide">
					<div class="text">
						<h3>不断改善，成为最佳!</h3>
						<p>Constantly improve and become the best!</p>
					</div>

					<img src="http://139.196.43.147/gallery/t01d6f5fd3610da0a08.jpg" alt="">
				</div>

				<div class="swiper-slide">
					<div class="text">
						<h3>唯有坚持才能看见曙光!</h3>
						<p>Only persistence can see the dawn!</p>
					</div>

					<img src="http://139.196.43.147/gallery/t012cde4a5058c156b7.jpg" alt="">
				</div>

				<div class="swiper-slide">
					<div class="text">
						<h3>永远年轻，永远热泪盈眶!</h3>
						<p>Forever young, forever tearful!</p>
					</div>

					<img src="http://139.196.43.147/gallery/t01aaa82ef6d0f1ec87.jpg" alt="">
				</div>
			</div>
			<div class="swiper-pagination"></div>
		</div>

		<!-- 引入swiper轮播图插件 -->
		<script src="./lib/swiper/swiper-bundle.min.js"></script>
		<script>
			var swiper = new Swiper(".mySwiper", {
				pagination: {
					el: ".swiper-pagination",
					dynamicBullets: true
				},
				autoplay: {
					delay: 5000
				},
				loop: true,
			});
		</script>

		<!-- 波纹 -->
		<div class="ripple">
			<svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
				<defs>
					<path id="gentle-wave"
						d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" />
				</defs>
				<g class="parallax">
					<use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7" />
					<use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)" />
					<use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)" />
					<use xlink:href="#gentle-wave" x="48" y="7" fill="#fff" />
				</g>
			</svg>
		</div>
	</div>

	<!-- 主体内容 -->
	<div class="main">
		<div class="w">
			<!-- 文章列表 -->
			<div class="list home_list">
				<!-- 小圆点 -->
				<div class="dots">
					<ol>
						<li></li>
						<li></li>
						<li></li>
					</ol>
				</div>

				<!-- 列表 -->
				<ul>
					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<a href="./article.html">
								<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/5e7d37251bc04bf48caafe62eae2991e~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?"
									alt="">
							</a>

							<span class="tags_blue">开发记录</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="./article.html">
									<span class="tags_purple">精品</span> <span class="tags_red">置顶</span> <span
										class="tags_yellow">推荐</span>
									大厂裁员下，程序员如何做“副业”？
								</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								最近大厂裁员不断，好多人思考要不要搞个副业抵御风险。那你知道程序员的副业怎么做吗？来和我一探究竟吧～</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>264</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"></i>39537</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-23 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/720d976d5b5947c187b8f7039126c10e~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
								alt="">

							<span class="tags_yellow">大前端</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">
									<span class="tags_red">置顶</span>
									一个96年前端的2022年中总结 (落户,看房,还贷,被裁)
								</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">「时光不负，创作不停，本文正在参加2022年中总结征文大赛」 落户 关于落户这个事, 就是一个很突然的想法,很突然,
								得知天津有个"海河英才计划",只要是本科生, 就比较容易落户,所以就想着试一试, </p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>869</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"
											style="color: #ee7273"></i>85971</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-21 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/d12a45feaa59431fb4addf63f5719f37~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
								alt="">

							<span class="tags_blue">大前端</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">从Spring为什么要用IoC的支点，我撬动了整个Spring的源码脉络！</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								把镜头拉回到使用Spring后最大变化是什么？先从使用Spring的角度来看源码，好像事情也并没有那么错综复杂。
							</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>432</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"
											style="color: #ee7273"></i>61587</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-20 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/35b7a1eb2d974573af63441508b1f678~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
								alt="">

							<span class="tags_purple">大前端</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">你的图片加载，一点都不酷炫！不信You Look Look</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								对于图片加载，咱们可以更酷炫一点！ 比如这样！ 这样！ 这样！ 还有这样的！ 前言
								现代网站中的图片使用量是很大的，在一些门户网站中，还会有一些大尺寸的图片展示，这个时候图片如果加载不顺畅，是很影响用
							</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>267</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"></i>42376</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-15 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fe13aa9b39484dedb11826d77251ceb0~tplv-k3u1fbpfcp-zoom-crop-mark:1304:1304:1304:734.awebp?"
								alt="">

							<span class="tags_red">框架</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">大菠萝？Pinia已经来了，再不学你就out了</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								Pinia优势 Pinia是一个全新的Vue状态管理库，是Vuex的代替者，尤雨溪强势推荐 Vue2 和 Vue3 都能支持 抛弃传统的 Mutation ，只有
								state,
								getter 和 ac</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>482</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"></i>42364</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-11 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<a href="./article.html">
								<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0cfdda6a33d040609fd0c6ca73791ef9~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
									alt="">
							</a>

							<span class="tags_blue">开发记录</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="./article.html">新一代前端应该使用的"开发套餐"</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">众所周知，前端界，框架库一直处在学不过来，大佬们还一直在开发的
								黄金时代（卷王时代，bushi），在这个大卷王时代，我们有必要浅浅了解下这些新果实，不做上个时代的残党！</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>264</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"></i>39537</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-23 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/410367118c8a463dbe45fa1d30d7ad4a~tplv-k3u1fbpfcp-no-mark:240:240:240:160.awebp?"
								alt="">

							<span class="tags_yellow">大前端</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">
									<span class="tags_yellow">推荐</span>
									2022 年值得推荐的 Vue 库！
								</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">大家好，我是CUGGZ。 今天来推荐几个实用的 Vue 库！ 1. 状态管理 （1）Pinia Pinia 是最新一代的 Vue
								轻量级状态管理库。它适用于 Vue 2.x 和 Vue 3.x。它是 </p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>869</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"
											style="color: #ee7273"></i>85971</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-21 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b808f050e0854400b99651974d55c402~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
								alt="">

							<span class="tags_blue">大前端</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">写了个git提交脚本，再也不用命令行了</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								平时项目中我们绝大部分都是用bash命令行，或者用GUI可视化工具，无论是小乌龟还是gui工具，如果是工具比较推荐sourceTree，但是我更推荐git-fork,工具因人而已
							</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>432</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"
											style="color: #ee7273"></i>61587</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-20 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c595a7cbf2734883a7f3aa37639a6ab5~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
								alt="">

							<span class="tags_purple">大前端</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">让MacBook成为生产力｜软件推荐｜环境配置</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								本文梳理了推荐MacBook安装的一些高效软件，能够满足绝大部分的办公以及日常生活需求。其次，陈述了对于开发者必备的环境配置要求。最后总结了一些开发语言和工具的下载地址以及安装注意事项。
							</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>267</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"></i>42376</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-15 </a>
								</div>
							</div>
						</div>
					</li>

					<li>
						<!-- 文章缩略图 -->
						<div class="left">
							<img src="https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3cb06981fc8a4f3fa66b314b5b77faa6~tplv-k3u1fbpfcp-zoom-crop-mark:3024:3024:3024:1702.awebp?"
								alt="">

							<span class="tags_red">框架</span>
						</div>

						<!-- 文章内容 -->
						<div class="right">
							<!-- 文章标题 -->
							<h2>
								<a href="javascript:;">如何在繁重的工作中持续成长？</a>
							</h2>

							<!-- 文章摘要 -->
							<p class="list-length">
								在加班文化盛行的互联网文化中，很多开发者为自己的个人成长感到迷茫。这篇文章将会从我的个人经历出发，从打破成长的误区、如何高效的利用时间、以及坚持沉淀和写作三个方面介绍，如何在繁重的工作中也可以做到持续
							</p>

							<!-- 文章信息 -->
							<div class="meta">
								<!-- 作者头像 -->
								<a href="javascript:;">
									<img src="./image/user.png" alt="">
									<span>Admin</span>
								</a>

								<div>
									<!-- 文章点赞数 -->
									<a href="javascript:;"><i class="iconfont icon-dianzan"></i>482</a>
									<!-- 文章浏览量 -->
									<a href="javascript:;"><i class="iconfont icon-huo"></i>42364</a>
									<!-- 文章发布时间 -->
									<a href="javascript:;"><i class="iconfont icon-shijian"></i>2022-4-11 </a>
								</div>
							</div>
						</div>
					</li>
				</ul>

				<!-- 分页 -->
				<div class="pagination">
					<a href="javascript:;">‹‹</a>
					<a href="javascript:;">‹</a>
					<a href="javascript:;" class="paginationAction">1</a>
					<a href="javascript:;">2</a>
					<a href="javascript:;">3</a>
					<a href="javascript:;">4</a>
					<a href="javascript:;">5</a>
					<a href="javascript:;">6</a>
					<a href="javascript:;">››</a>
				</div>

				<!-- 加载列表 -->
				<div class="loadList">
					<i class="iconfont icon-loadm"></i>
					<span>加载更多</span>
				</div>
			</div>

			<!-- 功能模块 -->
			<div class="function">
				<div class="sticky">
					<!-- 作者详情 -->
					<div class="author">
						<!-- 背景图片 -->
						<div class="author-bg">
							<!-- 头像 -->
							<div class="avatar">
								<img src="./image/user.png" alt="">
							</div>
						</div>

						<!-- 作者信息 -->
						<div class="text">
							<h4>
								<a href="javascript:;">悦兴</a>
								<div class="medal"></div>
							</h4>
							<p>也许，将会是最好用的博客管理系统</p>
						</div>

						<!-- 功能 -->
						<div class="fun">
							<!-- 发布文章 -->
							<div class="login"><a href="javascript:;">登录</a></div>

							<span></span>

							<!-- 登录后台 -->
							<div class="register"><a href="javascript:;">注册</a></div>
						</div>
					</div>

					<!-- 随机文章 -->
					<div class="containerA">
						<!-- 标题 -->
						<div class="title">
							<h3><i class="iconfont icon-suijishushengcheng"></i> 随机文章</h3>
							<!-- 小圆点 -->
							<div class="dots">
								<ol>
									<li></li>
									<li></li>
									<li></li>
								</ol>
							</div>
						</div>

						<!-- 随机文章 -->
						<div class="random_Alist">
							<ul>
								<li>
									<i class="iconfont icon-xiangyoujiantou"></i>
									<a href="javascript:;">2022 年的 React 生态</a>
								</li>

								<li>
									<i class="iconfont icon-xiangyoujiantou"></i>
									<a href="javascript:;">字节跳动自研高性能微服务框架 Kitex 的演进之旅</a>
								</li>

								<li>
									<i class="iconfont icon-xiangyoujiantou"></i>
									<a href="javascript:;">两年前端，广州求职，要价 14k，依我说，小伙子可以多要点，涉及组件建设、工程化以及丰富的项目经验</a>
								</li>

								<li>
									<i class="iconfont icon-xiangyoujiantou"></i>
									<a href="javascript:;">解放双手！推荐一款阿里开源的低代码工具，YYDS！</a>
								</li>

								<li>
									<i class="iconfont icon-xiangyoujiantou"></i>
									<a href="javascript:;">Web3.0来了，花呗借呗前端团队开源的Web图形引擎会成为元宇宙的技术支撑吗？</a>
								</li>

								<li>
									<i class="iconfont icon-xiangyoujiantou"></i>
									<a href="javascript:;">超越 Nginx！号称下一代 Web 服务器，用起来够优雅！</a>
								</li>
							</ul>
						</div>
					</div>

					<!-- 标签栏 -->
					<div class="containerA">
						<!-- 标题 -->
						<div class="title">
							<h3><i class="iconfont icon-tuya_huabanfuben"></i> 标签栏</h3>
							<!-- 小圆点 -->
							<div class="dots">
								<ol>
									<li></li>
									<li></li>
									<li></li>
								</ol>
							</div>
						</div>

						<!-- 标签 -->
						<div class="containerA_Tags">
							<a href="javascript:;">HTML</a>
							<a href="javascript:;">CSS</a>
							<a href="javascript:;">Vue</a>
							<a href="javascript:;">jQuery</a>
							<a href="javascript:;">Vue</a>
							<a href="javascript:;">React</a>
							<a href="javascript:;">Angular</a>
							<a href="javascript:;">less</a>
							<a href="javascript:;">Node.js</a>
							<a href="javascript:;">Bootstrap</a>
							<a href="javascript:;">Element</a>
							<a href="javascript:;">scss</a>
							<a href="javascript:;">uni-app</a>
							<a href="javascript:;">Foundation</a>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>

	<!-- 友情链接 -->
	<div class="links w">
		<h3>
			<i class="iconfont icon-lianjie1"></i>
			<span>友情链接</span>
			<a href="./links.html" style="float: right;font-size: 15px;">更多</a>
		</h3>

		<ul>
			<li>
				<a href="https://github.com/">GitHub</a>
			</li>
			<li>
				<a href="https://www.csdn.net/">CSDN</a>
			</li>
			<li>
				<a href="https://juejin.cn/">掘金</a>
			</li>
			<li>
				<a href="https://www.cnblogs.com/">博客园</a>
			</li>
			<li>
				<a href="https://segmentfault.com/">思否</a>
			</li>
		</ul>
	</div>

	<!-- 底部 -->
	<div class="footer">
		<div class="w">
			<!-- 站点信息 -->
			<div class="Web_info">
				<!-- 站点名称 -->
				<div class="Web_name">
					<h1><a href="javascript:;">Yuexing</a></h1>
					<div class="dian"></div>
				</div>

				<!-- 站点描述 -->
				<div class="Web_describe">
					<p>© 2022 <a href="javascript:;">Yuexing</a> - 也许，将会是最好用的博客管理系统！</p>
					<p>Perhaps, it will be the best blog management system!</p>
				</div>
			</div>

			<!-- ICP备案号 -->
			<div class="ICP">
				<a href="https://beian.miit.gov.cn/#/Integrated/index"><i
						class="iconfont icon-icp-license"></i>豫ICP备2020031040号-1</a>
			</div>
		</div>
	</div>

	<!-- 侧边工具栏 -->
	<div class="tool">
		<div class="item">
			<a href="javascript:;">
				<i class="iconfont icon-zhuti_yifu_o"></i>
			</a>
		</div>

		<div class="item">
			<a href="javascript:;" id="returnTop">
				<i class="iconfont icon-fanhuidingbu1"></i>
			</a>
		</div>
	</div>

	<!-- 引入公共 JavaScript文件 -->
	<script src="./js/public.js"></script>
	<!-- 引入页面JavaScript文件 -->
	<script src="./js/index.js"></script>
</body>

</html>